﻿<p>In order to draw axis labels you need <strong>jquery.flot.axislabels.js</strong>.</p>

<div class="well">
  <h4>Drawing axis labels</h4>
  Axis labels can be drawn by setting the appropriate properties of the <strong>WebExtras.JQFlot.SubOptions.AxisOptions</strong> class.
  <pre><code>
  AxisOptions axisOpt = new AxisOptions
  {
    axisLabel = "my axis label"
  };
  </code></pre>
</div>

<div class="well">
  <h4>Axis label options</h4>
  <div class="content">
    <table class="table table-striped table-bordered">
      <tr>
        <th>Option</th>
        <th>Type</th>
        <th>Default</th>
        <th style="width: 45%">Description</th>
      </tr>
      <tr>
        <td>axisLabel</td>
        <td>string</td>
        <td><i>Empty string</i></td>
        <td>Axis label to be shown</td>
      </tr>
      <tr>
        <td>axisLabelColor</td>
        <td>string</td>
        <td><i>Color of grid</i></td>
        <td>Axis label color to be used</td>
      </tr>
      <tr>
        <td>axisLabelPadding</td>
        <td>integer</td>
        <td>2</td>
        <td>Padding, in pixels, between the tick labels and the axis label</td>
      </tr>
      <tr>
        <td>axisLabelUseCanvas</td>
        <td>boolean</td>
        <td><i>None</i></td>
        <td>Flag indicating whether to use the HTML5 Canvas element to render the axis labels</td>
      </tr>
      <tr>
        <td>axisLabelUseHtml</td>
        <td>boolean</td>
        <td>true</td>
        <td>Flag indicating whether to use HTML and CSS transformations to render the axis labels</td>
      </tr>
      <tr>
        <td>axisLabelFontSizePixels</td>
        <td>int</td>
        <td>14</td>
        <td>Font size in pixels for the axis label. This option is only available if 'axisLabelUseCanvas' is set to true.</td>
      </tr>
      <tr>
        <td>axisLabelFontFamily</td>
        <td>string</td>
        <td>sans-serif</td>
        <td>Font family for the axis label. This option is only available if 'axisLabelUseCanvas' is set to true.</td>
      </tr>
    </table>
    <div class="row-fluid">
      <div class="span12">
        <strong>Note:</strong> This plugin only works with Flot v0.7 and above since internally, it no longer takes into account the name of the axis 
        (i.e. yaxis, y2axis, etc.) but rather looks at the 'position' variable, which Flot automatically sets if it is not provided.
      </div>
    </div>
  </div>
</div>